<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 150px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div>
        123
    </div>
    <script>
        // 实现了 捕捉全部运动效果结束  
        // 增加一个新的需求 
        // 你全部结束以后帮我做一件事情  
        function move(ele,options,fn,t=50){
            // fn 是个函数  运动结束以后才被调用 
            // 又被称为 回调函数  

            
            // 比上一次多一步 对options 进行遍历 
            // 拿出所有的键值对  
            // 键 是 效果类型  
            // 值 是 目标
            var count = 0; // 准备1个计数器  
            for(var k in options){
                // 每循环1次 开一个定时器  计数器+1
                count++;
                // k 是效果类型
                const type = k;  // 如果这里是var 全局 
                // var 允许重名的 后边会把前面的覆盖掉  会发现多个效果只执行了最后一个
                // options[k] 目标值
                let target = options[k];

                if(type == 'opacity'){
                    target *= 100;
                }
                var timer = setInterval(()=>{
                    let current;
                    if(type=='opacity'){
                        // 获取值  如果是 opacity 乘以100 
                        current = window.getComputedStyle(ele)[type] * 100
                    }else{
                        current = parseInt(window.getComputedStyle(ele)[type]);
                    }
                    // 每次变化的  (目标-元素新的位置)  /  10
                    var duration = (target-current)/10;
                    duration = duration>0?Math.ceil(duration):Math.floor(duration)
                    if(current == target){
                        clearInterval(timer)
                        // console.log('结束了');
                        // 每关闭一个定时器  计数器-1
                        count--;

                        if(count ===0) fn();
                        // 函数调用的时候加() 
                    }
                    else{
                    if(type == 'opacity'){
                        // 如果是opacity 除以100以后 赋值  
                        // 元素 只接受  [0,1] 
                        ele.style[type] = (current+duration)/100;
                    }else{
                        ele.style[type] = current+duration + 'px';
                    }
                        
                    }
                    
                },t)


            }
           
        }

        document.querySelector('div').onclick = function(){

            move(this,{'left':500,'width':666,opacity:0.72,'borderRadius':200},()=>{console.log('我是你运动全部结束之后调用的函数')})
        }


        // 上面我们就实现了 多个效果 仅调用一次函数  即可

        // 多个效果  有几个效果开几个定时器 
        // 每个效果 开一个 
        // 每个效果 运动结束 关闭一个  有几个就关闭几次 

        // 如何捕捉到 所有的运动完全结束了  

        // 当所有的定时器全部关闭了 我们得到一个信号  全部完成  
         
        
        // 为了实现这个效果  

        // 准备一个计数器   
        // 开启一个定时器  计数器+1 
        // 关闭一个定时器  计数器-1

        // 当计数器为0 代表全部运动结束了  
</script>

</body>
</html>
